/** * @description: 五困生详情 */
<template>
  <div class="pub-container">
    <div class="basic-msg" @click="skipTalkRecordClick">
      <div class="floor-top">
        <label>李</label>
        <p>
          <span>李丽丽</span>
          <span>2021123456</span>
        </p>
      </div>
      <div>
        <label>是否五困生：</label>
        <span>是</span>
      </div>
      <div>
        <label>五困生类型：</label>
        <span>经济困难、行为困难、经济困难、行为困难、经济困难</span>
      </div>
    </div>

    <div class="tab-wrapper">
      <van-tabs v-model="active" swipe-threshold="4" title-active-color="#2E6CF6" title-inactive-color="#5F5F6B" line-width="24">
        <van-tab v-for="(item, index) of fiveHardList" :key="index" :title="item">
          <div class="tab-content">
            <div class="floor">
              <p class="title">基本信息</p>
              <div class="floor-content">
                <p>
                  <label>手机号码</label>
                  <span>15755123148</span>
                </p>
                <p>
                  <label>学生类型</label>
                  <span>15755123148</span>
                </p>
              </div>
            </div>
            <div class="floor">
              <p class="title">家庭信息</p>
              <div class="floor-content">
                <p>
                  <label>手机号码</label>
                  <span>15755123148</span>
                </p>
                <p>
                  <label>学生类型</label>
                  <span>15755123148</span>
                </p>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FiveHardDetail',
  data() {
    return {
      fiveHardList: ['基本信息', '行为', '心理', '学业', '经济', '思想'],
      active: 0,
    }
  },
  methods: {
    skipTalkRecordClick() {
      this.$router.push('/talkRecord')
    },
  },
}
</script>

<style lang="scss" scoped>
.basic-msg {
  background: $bg-white;
  padding: 20px 12px;

  .floor-top {
    @include fh();
    label {
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      border-radius: 50%;
      font-size: $fz12;
      text-align: center;
      background: #2e6cf6;
      color: #fff;
      margin-right: 12px;
    }
    p {
      font-size: $fz16;
      span {
        display: block;
        color: $color-title;
      }
      span + span {
        font-size: $fz14;
        color: #97979f;
        margin-top: 8px;
      }
    }
  }
  > div + div {
    label {
      font-size: $fz14;
      color: #5f5f6b;
      white-space: nowrap;
    }
    span {
      font-size: $fz14;
      color: #000;
    }
  }
  > div:last-child {
    display: flex;
    margin-top: 15px;
    span {
      text-align: justify;
      line-height: 20px;
      margin-top: -2px;
    }
  }
}

.tab-wrapper {
  border-top: 1px solid #e7eaf0;
  .tab-content {
    .floor {
      .title {
        height: 38px;
        line-height: 40px;
        font-size: $fz12;
        color: #97979f;
        padding: 0 12px;
        background: #f4f6fa;
      }
      &-content {
        background: $bg-white;
        p {
          display: flex;
          align-items: center;
          height: 50px;
          padding: 0 12px;
        }
        label {
          width: 120px;
          font-size: $fz14;
          color: #97979f;
        }
        span {
          font-size: $fz14;
          color: $color-title;
        }
      }
    }
  }
}
::v-deep {
  .van-tabs__nav {
    > div {
      width: 19%;
    }
    > div:first-child {
      width: 24%;
    }
  }
  .van-tabs__line {
    background: #2e6cf6;
  }
}
</style>
